// 标签文档
<template>
  <div class="label_document">
    <div class="search-top">
      <div class="search-tree">
        <navigation-title>
          <div class="create_box">
            <setLabel :rowData="rowData" @onRefresh="getTreeData" />
          </div>
        </navigation-title>
      </div>
      <!-- <el-input v-model="searchValue" placeholder="请输入搜索内容" @keyup.enter.native="getSearch" /> -->
    </div>
    <div class="containers sa-flex">
      <ResizeBox :resize-conf="resizeConf">
        <el-tree
          ref="labelTreeRefs"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="expandedKeys"
          @node-click="elTreeNodeClick"
          :highlight-current="true"
          :current-node-key="currentId"
          :lazy="true"
          :load="loadNode"
          :filter-node-method="filterNode"
        >
          <template #default="{ node, data }">
            <svg-icon :icon-class="data.icon || ''"></svg-icon>
            <span>{{ data.labelName }}</span>
          </template>
        </el-tree>
      </ResizeBox>
      <div class="right-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-style="{ height: '50px' }"
          :header-row-style="{ height: '50px' }"
          @row-dblclick="getRowDblClick"
        >
          <el-table-column prop="realName" label="文件名" show-overflow-tooltip>
            <template #default="{ data, row }">
              <svg-icon :icon-class="selectSvgIcons(row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
              {{ row.realName }}{{ row.suffix ? `.${row.suffix}` : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建者" />
        </el-table>
      </div>
    </div>
  </div>
</template>
     
<script setup lang='ts'>
import { apiFilesUserLabelQuerySys, apiFilesLabelRecordQuerySys } from '@/api/enterpriseDoc/labelDocumentApi';
import { ref, reactive } from 'vue';
const { proxy } = getCurrentInstance() as any;
import navigationTitle from '@/views/components/newUiModule/navigation-title.vue';
import ResizeBox from '@/views/components/yu-dragLayouter/ResizeBox.vue';
import setLabel from './component/labelDocument/setLabel.vue';
import { useEnterpriseDocStore } from '@/store/modules/enterpriseDoc';
import { ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi';
const docStore = useEnterpriseDocStore();
const rowData: any = ref(docStore.row); // 获取父组件传递过来的数据
// 拖拽配置参数
const resizeConf = reactive({
  width: 270, // 初始宽度
  widthRange: [200, 1500] // 宽度范围
});
// 左侧树数据
const treeData = ref<any[]>([]);
// 左侧树默认属性
const defaultProps = {
  children: 'children',
  label: 'label',
  icon: 'icon'
};
// 左侧树展开节点
const expandedKeys = ref<string[]>([]);
// 左侧树当前选中节点
const currentId = ref<any>(0);
// 点击树
const elTreeNodeClick = (data: any, node: any) => {
  currentId.value = data.id;
  getTableData();
};
// 获取树数据
const getTreeData = async () => {
  let params = {
    sortAsc: 'sort',
    libraryId: rowData.value.id
  };
  let res: any = await apiFilesUserLabelQuerySys(params);
  if (res.code == 200) {
    treeData.value = res.data;
  }
};
// 加载节点
const loadNode = async (node: any, resolve: any) => {
  if (node.level === 0) {
    return resolve([{ name: node.data.labelName }]);
  }
  setTimeout(() => {
    const data = node.data.children;
    // if (this.$route.query.labelId) {
    //   this.$refs.labelTreeRefs.setCurrentKey(this.expandedKeys[this.expandedKeys.length - 1]); //设置高亮
    // }
    resolve(data);
  }, 500);
};
// 过滤节点
const filterNode = (value: any, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
//////////////////////////////////////////////////////////// 表格相关操作  ///////////////////
const tableData = ref<any[]>([]); // 表格数据
// 获取表格数据
const getTableData = async () => {
  let params = {
    labelId: currentId.value
  };
  let res: any = await apiFilesLabelRecordQuerySys(params);
  if (res.code == 200) {
    tableData.value = res.data;
  }
};
// 表格双击行
const getRowDblClick = async (row: any) => {
  let params = {
    id: row.id,
    fileType: 2
  };
  let res = await ApiPerGetParentTreeNodeAll(params);
  if (res.code == 200) {
    let expandedKeys = res.data.map((item: any) => {
      let obj = {
        id: parseInt(item.id),
        label: item.realName
      };
      return obj;
    });
    sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));
    proxy.$router.push({ path: '/newUi/enterprises/enterpriseDoc' });
  }
};
// 图标方法
const selectSvgIcons = (row: any) => {
  return proxy.$yuUtils.selectSvgIcon(row);
};
onMounted(() => {
  getTreeData();
});
</script>
<style scoped lang='scss'>
.label_document {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  .search-top {
    height: 48px;
    padding-right: 20px;
    // margin-left: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 15px;
    .el-input {
      width: 240px;
      :deep(.el-input__inner) {
        border: none;
      }
    }

    .search-tree {
      border-radius: 4px;
      width: 100%;
      // padding: 8px;
      .text {
        color: #666666;
        // display: block;
      }
    }
  }
  .containers {
    flex: 1;
    display: flex;
    .resize {
      height: 100%;
      border-right: 1px solid #eee;
    }
    .right-container {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>